<template>
  <div class="mod-config">
    <el-form :inline="true" class="queryForm">
      <el-form-item>
        <el-button size="mini" v-if="isAuth('certificate:certificateRenewalInfo:list')" icon="iconfont iconsoushuo" @click="queryHandle()">搜索</el-button>
        <el-button size="mini" v-if="isAuth('certificate:certificateRenewalInfo:list')" type="warning" @click="updateParams(0)">三个月内快到期</el-button>
        <el-button size="mini" v-if="isAuth('certificate:certificateRenewalInfo:list')" type="danger" @click="updateParams(-1)">已到期</el-button>
        <el-button size="mini" v-if="isAuth('certificate:certificateRenewalInfo:list')" type="info" @click="updateParams(1)">已延期</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.code" v-for="item in editableTabs" :key="item.code">
          <certificate-type ref="child" :params="params"></certificate-type>
      </el-tab-pane>
    </el-tabs>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
  </div>
</template>

<script>
  import CertificateType from './../certificate/certifirenewal/certifirenewal-type'
  import QueryModel from './../certificate/certifirenewal/query-model'
  export default {
    data() {
      return {
        queryModelVisible: false,
        certificateinfoCrashVisible: false,
        flag: false,
        activeName: 'all',
        loading: true,
        dataEmpty: true,
        editableTabs: [],
        index:0,
        tenantId: '',
        params: {
          validityType: ''
        }
      }
    },
    components: {
      CertificateType, QueryModel
    },
    watch:{
      activeName(n,o){
        this.$refs.child[this.index].init(n, this.tenantId)
      },
      params(){
        this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      }
    },
    methods: {
      init(tenantId){
        this.tenantId = tenantId
        this.initJobs()
      },
      handleClick(tab, event) {
        this.activeName = tab.name
        this.index = tab.index
      },
      setParams(params){
        let _params = this.params
        this.params = merge(params, _params)
      },
      updateParams(validityType){
        this.params.validityType = validityType
        this.$nextTick(() => {
          this.$refs.child[this.index].getDataList()
        })
      },
      initJobs() {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.editableTabs = data
            this.editableTabs[0].code = 'all'
            setTimeout(() => {
              this.activeName = 'all'
            })
          }
        })
      },
      queryHandle(){
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      }
    }
  }
</script>

<style lang="scss">
    .el-card__body {
      padding: 10px 10px;
    }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryForm{
      margin-top: 10px;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
    .el-button--warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
    }
    .el-button--info {
      color: #1b92fb;
      background-color: #fff;
      border-color: #1b92fb;
    }
    </style>
